<template>
	<view class="life-cont">
		<view class="life-cont-head">
			<view class="life-cont-head-top">
				<view class="life-cont-head-text">红包生活津贴</view>
				<view class="life-cont-head-top-num">￥{{total_money}}</view>
			</view>
			<view class="life-cont-head-bottom">
				<view class="life-cont-head-bottom-item">
					<view class="life-cont-head-bottom-item-num">￥{{received_money}}</view>
					<view class="life-cont-head-text">领取金额</view>
				</view>
				<view class="life-cont-head-bottom-item">
					<view class="life-cont-head-bottom-item-num">￥{{past_money}}</view>
					<view class="life-cont-head-text">作废金额</view>
				</view>
			</view>
		</view>
		
		<view class="life-cont-list">
			<view class="life-cont-list-item" v-for="(item,index) in redList" :key="index">
				<view class="life-cont-list-item-time">{{item.create_time_text}}</view>
				<view class="life-cont-list-item-cont">
					<image class="life-cont-list-item-cont-icon" src="../../static/images/lottery_draw/getRed_icon.png"></image>
					<view class="life-cont-list-item-cont-info">
						<view class="life-cont-list-item-cont-info-countDown">
							<text>红包失效时间</text>
							<uni-countdown :second="item.takeTime" :show-colon="false" :show-day="false" />
						</view>
						<view class="life-cont-list-item-cont-red">领取红包：<text class="num">¥ {{item.money}}</text></view>
						<view class="life-cont-list-item-cont-info-btn" :class="{gay:item.state != 0}" @tap="takePack(item.id,item.state)">{{item.state_text}}</view>
					</view>
				</view>
			</view>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
		    return {
			    redList:[],
				page:1,
				total_pages:1,
				past_money:0,
				received_money:0,
				loadMoreStatus:1,
				total_money:0
		    };  
		},
		methods: {
			getData(type){
				let that = this
				that.loadMoreStatus = 1
				if(that.total_pages == 0) that.total_pages = 1
				if(that.page <= that.total_pages){
					jewel.get('Lottery/benefit_list',{page:that.page},true,function(res){
						if(type == 'loadMore'){
							that.redList = that.redList.concat(res.data.data)
							that.changeDate()
						}else{
							that.past_money = res.data.past_money
							that.received_money = res.data.received_money
							that.total_money = res.data.total_money
							that.redList = res.data.data
							that.total_pages = res.data.total_pages
							that.loadMoreStatus = that.total_pages <= 1?2:0
							that.changeDate()
						}
						uni.stopPullDownRefresh()
					})
				}else{
					that.loadMoreStatus = 2
				}
			},
			takePack(id,state){
				let that = this
				if(state != 0) return false
				uni.showLoading({
					title:'领取中',
					mask:true
				})
				jewel.post('Lottery/receive_benefit',{id:id},true,function(res){
					setTimeout(()=>{
						uni.hideLoading()
						jewel.showToast(res.data.msg,res.data.code == 0?1500:3000)
						if(res.data.code == 0){
							that.page = 1
							that.getData()
						}
					},1500)
				})
			},
			changeDate(){
				let that = this
				for(let i in that.redList){
					let start = that.redList[i].time
					let end = that.redList[i].end_time_text
					if(end != 0) that.redList[i].takeTime = that.GetDateDiff(start,end,'second')
					
				}
			},
			GetDateDiff(startTime, endTime, diffType) {
			    //将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式 
			    startTime = startTime.replace(/\-/g, "/");
			    endTime = endTime.replace(/\-/g, "/");
			    //将计算间隔类性字符转换为小写
			    diffType = diffType.toLowerCase();
			    var sTime =new Date(startTime); //开始时间
			    var eTime =new Date(endTime); //结束时间
			    //作为除数的数字
			    var timeType =1;
			    switch (diffType) {
			        case"second":
			            timeType =1000;
			        break;
			        case"minute":
			            timeType =1000*60;
			        break;
			        case"hour":
			            timeType =1000*3600;
			        break;
			        case"day":
			            timeType =1000*3600*24;
			        break;
			        default:
			        break;
			    }
			    return parseInt((eTime.getTime() - sTime.getTime()) / parseInt(timeType));
			}
		},
		onLoad() {
			this.getData()
		},
		onReachBottom() {
			this.page++
			this.getData('loadMore')
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.gay{
		background-color: #CCCCCC !important;
	}
	.life-cont{
		&-head{
			background-image: url(../../static/images/jewel/lifePack_bg.jpg);
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			height: 314rpx;
			color: #FFFFFF;
			padding-left: 65rpx;
			box-sizing: border-box;
			&-text{
				font-size: 30rpx;
			}
			&-top{
				padding-top: 68rpx;
				margin-bottom: 26rpx;
				&-num{
					font-size: 54rpx;
					font-weight: bold;
					line-height: 66rpx;
				}
			}
			&-bottom{
				display: flex;
				align-items: center;
				&-item{
					margin-right: 78rpx;
					&-num{
						font-size: 30rpx;
					}
				}
			}
		}
		&-list{
			&-item{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 20rpx solid #ededed;
				&-time{
					color: #808080;
					font-size: 30rpx;
					line-height: 66rpx;
					border-bottom: 1px solid #f3f3f3;
				}
				&-cont{
					display: flex;
					align-items: center;
					padding: 30rpx 0;
					&-icon{
						width: 170rpx;
						height: 170rpx;
						margin-right: 20rpx;
					}
					&-info{
						font-size: 30rpx;
						color: #333333;
						&-countDown{
							display: flex;
							align-items: center;
							text{
								margin-right: 30rpx;
							}
						}
						&-btn{
							width: 100%;
							background-color: #d31311;
							text-align: center;
							line-height: 56rpx;
							border-radius: 50px;
							color: #FFFFFF;
							font-size: 28rpx;
							margin-top: 28rpx;
							box-shadow: 0 2px 9px rgba(116,116,116,0.65);
						}
					}
					&-red{
						.num{
							color: #d31311;
						}
					}
				}
				
			}
			
		}
	}
	/deep/ .uni-countdown__number{
		width: 44rpx !important;
		height: 44rpx;
		line-height: 44rpx;
		margin: 0;
		border: 0;
		padding: 0;
		text-align: center;
		background-color: #f85c5a !important;
		color: #FFFFFF !important;
		border-radius: 5px;
	}
	/deep/ .uni-countdown__splitor{
		width: 44rpx !important;
		height: 44rpx;
		line-height: 44rpx;
		padding: 0;
		text-align: center;
	}
</style>
